<template>
  <vxe-modal ref="xModal" v-model="isShowDetailModal" title="详情" width="800" :zIndex="999" resize destroy-on-close>
      <vxe-form ref="xForm" :data="formData" title-align="right" title-width="100">
        <vxe-form-item title="添加客户" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-address-card-o'}"></vxe-form-item>
        <vxe-form-item title="名称" field="name" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="简称" field="shortName" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="助记码" field="mnemonicCode" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="座机号" field="telephone" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="邮编" field="postcode" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="分类" field="category" span="12" :item-render="{name: 'Select', props: {filterable: true}, options: categoryList}"></vxe-form-item>
        <vxe-form-item title="法人代表" field="legalPersonContactId" span="12" :item-render="{name: 'Select', props: {filterable: true}, options: contactList}"></vxe-form-item>
        <vxe-form-item title="业务代表" field="businessAgentContactId" span="12" :item-render="{name: 'Select', props: {filterable: true}, options: contactList}"></vxe-form-item>
        <vxe-form-item title="收货人" field="consigneeContactId" span="10" :item-render="{name: 'Select', props: {filterable: true}, options: contactList}"></vxe-form-item>
        
        <vxe-form-item title="省份" field="province" span="4" :item-render="{name: 'Select', props: {filterable: true}, options: []}"></vxe-form-item>
        <vxe-form-item title="城市" field="city" span="4" :item-render="{name: 'Select', props: {filterable: true}, options: []}"></vxe-form-item>
        <vxe-form-item title="区" field="county" span="4" :item-render="{name: 'Select', props: {filterable: true}, options: []}"></vxe-form-item>
        <vxe-form-item title="地址" field="address" span="24" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        
        <vxe-form-item title="标签" span="24">
          <vxe-checkbox-group v-model="formData.tags">
            <vxe-checkbox v-for="item in tagList" :key="item.value" :label="item.value">{{ item.label }}</vxe-checkbox>
          </vxe-checkbox-group>
        </vxe-form-item>
        <vxe-form-item title="备注" field="remark" span="24" :title-suffix="{message: '啦啦啦，就是这么强大！！！', icon: 'fa fa-question-circle'}" :item-render="{name: 'textarea', attrs: {placeholder: '请输入地址'}}"></vxe-form-item>
        <vxe-form-item title="开票资料" span="24" title-align="left" title-width="200px" :title-prefix="{message: '请填写必填项', icon: 'fa fa-info-circle'}"></vxe-form-item>
        <vxe-form-item title="单位名称" field="unitName" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="税号" field="taxNumber" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="开户行" field="openingBank" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="银行账户" field="bankAccount" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="注册地址" field="registAddress" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="办公地址" field="officeAddress" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="开票电话" field="invoiceTelephone" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
        <vxe-form-item title="传真号" field="faxNumber" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入'}}"></vxe-form-item>
      </vxe-form>
    </vxe-modal>
</template>
<script>
export default {
  name: 'CustomerTableDetail',
  components: {},
  props: {},
  data() {
    return {
      isShowDetailModal: false,
      formData: {}
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    showModal(detail) {
      this.isShowDetailModal = true;
      this.formData = detail;
    }
  }
};
</script>
<style lang="less" scoped>
</style>
